import React from 'react';
import { NavigationContainer, useRoute, RouteProp } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';

import { Colors } from '../constants/colors';
import CourseManagementScreen from '../screens/CourseManagementScreen';
import AiChatScreen from '../screens/AiChatScreen';
import PersonalCenterScreen from '../screens/PersonalCenterScreen';
import AddCourseScreen from '../screens/AddCourseScreen';
import AddInstructorScreen from '../screens/AddInstructorScreen';
import InstructorManagementScreen from '../screens/InstructorManagementScreen';
import ProfileEditScreen from '../screens/ProfileEditScreen';
import ExerciseRecordsScreen from '../screens/ExerciseRecordsScreen';
import SignUpScreen from '../screens/SignUpScreen';
import MerchantRegisterScreen from '../screens/MerchantRegisterScreen';
import AuthLandingScreen from '../screens/AuthLandingScreen';
import EmailLoginScreen from '../screens/EmailLoginScreen';
import RoleSelectScreen from '../screens/RoleSelectScreen';
import InstructorRegisterScreen from '../screens/InstructorRegisterScreen';

export type RootStackParamList = {
  MainTabs: { initialTab?: keyof MainTabParamList } | undefined; // 修改这里，使其可以接收 initialTab 参数
  AuthLanding: undefined;
  EmailLogin: undefined;
  SignUp: undefined;
  RoleSelect: undefined;
  InstructorRegister: undefined;
  MerchantRegister: undefined;
  AddCourse: undefined;
  AddInstructor: undefined;
  InstructorManagement: undefined;
  CourseManagement: undefined;
  ProfileEdit: undefined;
  ExerciseRecords: undefined;
};

export type MainTabParamList = {
  AiChat: undefined;
  Profile: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<MainTabParamList>();

function MainTabs() {
  const route = useRoute<RouteProp<RootStackParamList, 'MainTabs'>>();
  const initialTabName = route.params?.initialTab || "AiChat"; // 默认选中 Profile
  return (
    <Tab.Navigator
      initialRouteName={initialTabName} // 动态设置 initialRouteName
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: keyof typeof Ionicons.glyphMap;
          if (route.name === 'AiChat') {
            iconName = focused ? 'chatbubble' : 'chatbubble-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          } else {
            iconName = 'help';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: Colors.primary,
        tabBarInactiveTintColor: Colors.gray[500],
        tabBarStyle: {
          backgroundColor: Colors.white,
          borderTopWidth: 1,
          borderTopColor: Colors.gray[200],
          paddingTop: 8,
          paddingBottom: 8,
          height: 60,
        },
        headerShown: false,
      })}
    >
      <Tab.Screen
        name="AiChat"
        component={AiChatScreen}
        options={{ tabBarLabel: 'AI' }}
      />
      <Tab.Screen
        name="Profile"
        component={PersonalCenterScreen}
        options={{ tabBarLabel: '帳戶' }}
      />
    </Tab.Navigator>
  );
}

export default function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="AuthLanding"
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="MainTabs" component={MainTabs} />
        <Stack.Screen name="AuthLanding" component={AuthLandingScreen} />
        <Stack.Screen name="EmailLogin" component={EmailLoginScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="RoleSelect" component={RoleSelectScreen} />
        <Stack.Screen name="InstructorRegister" component={InstructorRegisterScreen} />
        <Stack.Screen name="MerchantRegister" component={MerchantRegisterScreen} />
        <Stack.Screen name="AddCourse" component={AddCourseScreen} />
        <Stack.Screen name="AddInstructor" component={AddInstructorScreen} />
        <Stack.Screen name="InstructorManagement" component={InstructorManagementScreen} />
        <Stack.Screen name="CourseManagement" component={CourseManagementScreen} />
        <Stack.Screen name="ProfileEdit" component={ProfileEditScreen} />
        <Stack.Screen name="ExerciseRecords" component={ExerciseRecordsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
